<template>
  <div class="dashboard-container">
    <div class="app-container">
      <PageTool :show-before="false">
        <template v-slot:after>
          <el-button type="primary" size="small" @click="importFn">导入</el-button>
          <el-button type="primary" size="small" @click="exportFn">导出</el-button>
          <el-button type="primary" size="small" @click="adddEmployee">+新增员工</el-button>
        </template>
      </PageTool>
      <el-card>
        <!-- 表格 -->
        <el-table :data="employeesList">
          <el-table-column label="序号" type="index" />
          <el-table-column label="姓名" prop="username" />
          <el-table-column label="头像" prop="staffPhoto" width="120px">
            <template v-slot="{row}">
              <!--
                require('文件路径')： 相当于import form 都表示引入文件
                语法：const res = require('路径')
               -->
              <img
                v-imgError="require('@/assets/common/bigUserHeader.png')"
                style="width: 100px"
                :src="row.staffPhoto"
                alt=""
              >
            </template>
          </el-table-column>
          <el-table-column label="手机号" prop="mobile" />
          <el-table-column label="工号" prop="workNumber" />
          <el-table-column label="聘用形式" prop="formOfEmployment">
            <!-- 利用作用域插槽格式化聘用形式 row指的是employeesList中的对象 -->
            <template v-slot="{row}">
              <!-- 变量前面的加号 是为了进行数据类型转换的
              表示转换为数字类型 -->
              <!--
                {{ +row.formOfEmployment === 1?'正式': '非正式' }}
                如果添加了更多的聘用形式的情况下，三元运算写法就不利用扩展了
                所以我们可以写在一个函数中，函数中可以把所有聘用形式写在一个数组
                中，然后循环判断即可
               -->
              {{ formatEmployment(row.formOfEmployment) }}
            </template>
          </el-table-column>
          <el-table-column label="部门" prop="departmentName" />
          <el-table-column label="入职时间" prop="timeOfEntry">
            <template v-slot="{row}">
              <!-- {{ row.timeOfEntry.split('T')[0] }} -->
              {{ row.timeOfEntry | formatDate }}
            </template>
          </el-table-column>
          <!-- 这个状态值为1的时候表示 开启状态，否则关闭状态 -->
          <el-table-column label="状态" prop="enableState">
            <template v-slot="{row}">
              <el-switch :value="row.enableState===1" />
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template v-slot="{row}">
              <el-button type="text" @click="toDetail(row.id)">查看</el-button>
              <el-button type="text" @click="assignRole(row.id)">角色</el-button>
              <el-button type="text" @click="del(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <el-row type="flex" justify="center">
          <!-- page-size: 表示每页展示数据数量，默认是展示10条数据 -->
          <el-pagination
            layout="total, prev, pager, next"
            :total="total"
            :page-size="pageSize"
            @current-change="currentChange"
          />
        </el-row>
      </el-card>
      <!-- 新增员工
      默认情况下自定义标签，是不能直接绑定原生的js事件的，
      如果想要实现绑定原生js事件，想要添加native修饰符
       -->
      <AddEmployee
        :show-dialog.sync="visibleDialog"
        @updateEvent="userList"
      />
      <!-- 分配角色 -->
      <AssignRole
        ref="assignRole"
        :show-dialog.sync="showDialog"
      />
    </div>
  </div>
</template>

<script>
import { userList, delEmployee } from '@/api/employees'
import employees from '@/api/constant/employees'
import AddEmployee from './components/addEmployee.vue'
import { export_json_to_excel } from '@/vendor/Export2Excel.js'
import AssignRole from './components/assign-role.vue'
export default {
  components: { AddEmployee, AssignRole },
  data() {
    return {
      employeesList: [],
      total: 0,
      visibleDialog: false,
      pageSize: 5, // 每页请求的数量
      page: 1, // 页码
      showDialog: false
    }
  },
  created() {
    this.userList()
  },
  methods: {
    // 分配角色
    assignRole(id) {
      this.showDialog = true
      this.$refs.assignRole.getEmployeeDetail(id)
    },
    // 查看详情
    toDetail(id) {
      this.$router.push(`/employees/detail/${id}`)
    },
    // 导出
    async exportFn() {
      // 获取员工列表总数量
      const res = await userList({
        page: this.page, // 页码
        size: this.total // 请求总数量
      })
      console.log(101, res)
      // 数据转换，把是对象转换为数组，最终把数据转换为二维数组
      const data = res.data.data.rows.map(item => {
        return this.objToArr(item)
      })
      console.log('转换后的数据', data)
      // 调用花裤衩封装好的函数 实现导出表格功能
      const header = ['手机号码', '姓名', '入职日期', '转正日期', '工号']
      // const data = [
      //   [13234567678, '小明', '2022-09-12', '2022-11-20', '1234565'],
      //   [13234567679, '小芳', '2022-09-12', '2022-11-20', '1234566']
      // ]
      export_json_to_excel({
        header, // 表头
        data // 导出的内容
      })
    },
    // 对象转换数组
    objToArr(item) {
      const arr = []
      // 处理对象 转换数组
      // 中引文对照表
      const headers = {
        'mobile': '手机号码',
        'username': '姓名',
        'timeOfEntry': '入职日期',
        'correctionTime': '转正日期',
        'workNumber': '工号'
      }
      for (const key in headers) {
        const value = item[key] // 属性名对应的值
        // console.log(key, value)
        arr.push(value)
      }
      return arr
    },
    // 导入员工
    importFn() {
      this.$router.push('/import')
    },
    // 删除
    del(id) {
      // console.log(97, id)
      this.$confirm('确定删除该员工吗？', '提示', {
        type: 'warning'
        // confirmButtonText: '确定'
        // cancelButtonText: '取消'
      }).then(async() => {
        // console.log('确定')
        // 删除
        await delEmployee(id)
        // 更新列表，当删除最后一条数据的时候，需要请求上一页的数据
        if (this.employeesList.length === 1 && this.page !== 1) {
          this.page--
        }
        // 更新列表
        this.userList()
      }).catch(err => {
        console.log('取消：', err)
      })
    },
    // 新增员工
    adddEmployee() {
      this.visibleDialog = true
    },
    // 格式化聘用形式
    formatEmployment(type) {
      // let result = '未知'
      // employees.hireType.forEach(item => {
      //   if (item.id === +type) {
      //     result = item.value
      //   }
      // })
      // return result
      // find: 数组方法，表示查找数组中符合条件的元素，找到后返回该元素
      // 没有找到返回undefined
      const obj = employees.hireType.find(item => item.id === +type)
      // return obj && obj.value || '未知'
      return obj ? obj.value : '未知'
    },
    // 分页 页码发生改变时出发
    currentChange(page) {
      // console.log(page)
      this.page = page
      this.userList()
    },
    // 获取员工列表
    async userList() {
      const res = await userList({
        page: this.page,
        size: this.pageSize
      })
      // 保存员工列表和总数量
      this.employeesList = res.data.data.rows
      this.total = res.data.data.total
    }
  }
}
</script>

<style lang="scss" scoped>
.el-card{
  margin-top: 20px;
}
</style>
